<template>
	<div class="bigDiv">
		<el-form :inline="true" label-width="100px">
			<div class="topNav">
				<el-button type="text" icon="el-icon-search" @click="getList" style="float:right;">搜索</el-button>
				<el-button type="text" icon="el-icon-refresh" @click="reset"
					style="float:right;margin-right:10px;">重置</el-button>
				<el-button type="text" icon="el-icon-plus" @click="editProduct">新建小区</el-button>
			</div>
			<el-row :gutter="20">
				<div style="margin:0 20px;">
					<el-form-item label="小区编号">
						<el-input v-model="queryParams.code" placeholder="请输入" clearable size="small"></el-input>
					</el-form-item>
					<el-form-item label="小区名">
						<el-input v-model="queryParams.name" placeholder="请输入" clearable size="small"></el-input>
					</el-form-item>
				</div>
			</el-row>
		</el-form>
		<el-table v-loading="loading" :data="list" border height="calc(100vh - 320px)">
			<el-table-column prop="code" label="小区" align="center" width="300" />
			<el-table-column prop="name" label="小区名" align="center" />
			<el-table-column prop="address" label="小区地址" align="center" width="200" />
			<el-table-column prop="decBarea" label="总建筑面积" align="center" width="200" />
			<el-table-column prop="decCarea" label="占地面积" align="center" />
			<el-table-column prop="greeningRate" label="绿化率" align="center" />
			<el-table-column prop="dateCheckIn" label="进户时间" align="center" />
			<el-table-column prop="numBuilding" label="住宅楼栋" align="center" />
			<el-table-column prop="desBuilding" label="住宅层数描述" align="center" width="200" />
			<el-table-column prop="numEv" label="电梯总数" align="center" />
			<el-table-column prop="desStandardsPfc" label="物业费收费标准" align="center" width="200" />
			<el-table-column prop="desStandardsEfc" label="电梯收费标准" align="center" width="200" />
			<el-table-column prop="desParking" label="车位使用性质" align="center" width="200" />
			<el-table-column prop="decParking" label="车库建筑面积" align="center" width="200" />
			<el-table-column prop="numPs" label="车位总数" align="center" />
			<el-table-column prop="numPsSold" label="车位进户个数" align="center" width="200" />
			<el-table-column prop="numPsSale" label="空置车位个数" align="center" width="200" />
			<el-table-column prop="decParkingFee" label="车位费" align="center" width="200" />
			<el-table-column prop="decBranchArea" label="网点总建筑面" align="center" width="200" />
			<el-table-column prop="decBranch" label="网点收费标准" align="center" width="200" />
			<el-table-column prop="numBranch" label="网点总户数" align="center" width="200" />
			<el-table-column prop="numBranchSold" label="网点进户户数" align="center" width="200" />
			<el-table-column prop="numBranchSale" label="空置网点户数" align="center" width="200" />
			<el-table-column prop="numBuildings" label="住宅楼栋" align="center" />
			<el-table-column prop="numResTotal" label="住宅总户数" align="center" width="200" />
			<el-table-column prop="numRes" label="住宅进户数" align="center" width="200" />
			<el-table-column prop="numResVacant" label="空置住宅户数" align="center" width="200" />
			<el-table-column prop="remark" label="备注" align="center" />
			<el-table-column label="操作" align="center" fixed="right" width="200">
				<template slot-scope="scope" class="button-container">
					<div class="centered-content">
						<el-button type="text" size="mini" class="editBtn" @click="editProduct(scope.row)">
							编辑
						</el-button>
						<el-button type="text" size="mini" class="deleteBtn" @click="delProduct(scope.row)">
							删除
						</el-button>
						<el-button type="text" size="mini" class="detailBtn" @click="lookProduct(scope.row)">
							详情
						</el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize" @pagination="getList" />

		<!-- 小区维护弹窗 -->
		<el-dialog title="小区维护" :visible.sync="visible" :close-on-click-modal="false" :close-on-press-escape="false"
			width="60%">
			<el-form ref="elForm" :model="dataForm" :rules="rules" size="medium" label-width="200px" :disabled="canEdit"
				label-position="right" v-loading="loading">
				<el-col :span="12">
					<el-form-item label="小区编号" prop="code">
						<el-input :disabled="dataForm.id" v-model="dataForm.code" placeholder="请输入小区编号" clearable
							:style="{ width: '100%' }" show-word-limit :maxlength="17"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="小区名" prop="name">
						<el-input v-model="dataForm.name" placeholder="请输入小区名" clearable :style="{ width: '100%' }"
							show-word-limit :maxlength="17"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="小区地址" prop="address">
						<el-input v-model="dataForm.address" placeholder="请输入小区地址" clearable :style="{ width: '100%' }"
							show-word-limit :maxlength="17"></el-input>
					</el-form-item>
					<!-- <el-form-item label="小区地址" prop="address">
						<el-input v-model="dataForm.address" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }"
							placeholder="请输入" clearable show-word-limit :style="{ width: '100%' }" :maxlength="200"></el-input>
					</el-form-item> -->
				</el-col>
				<!-- <el-col :span="12">
					<el-form-item label="占地面积" prop="decCarea">
						<el-input v-model="dataForm.decCarea" placeholder="请输入占地面积" clearable :style="{ width: '100%' }"
							placeholder="请输入" clearable show-word-limit :style="{ width: '100%' }"
							:maxlength="200"></el-input>
					</el-form-item>
				</el-col> -->
				<el-col :span="12">
					<el-form-item label="占地面积" prop="decCarea">
						<el-input v-model="dataForm.decCarea" placeholder="请输入占地面积" clearable :style="{ width: '100%' }"
							show-word-limit :maxlength="17"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="总建筑面积" prop="decBarea">
						<el-input v-model="dataForm.decBarea" placeholder="请输入总建筑面积" clearable
							:style="{ width: '100%' }" show-word-limit :maxlength="17"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="绿化率" prop="greeningRate">
						<el-input v-model="dataForm.greeningRate" placeholder="请输入绿化率" clearable
							:style="{ width: '100%' }"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="进户时间" prop="dateCheckIn">
						<!-- <el-input v-model="dataForm.dateCheckIn" placeholder="请输入进户时间" clearable
							:style="{ width: '100%' }" show-word-limit :maxlength="17"></el-input> -->
						<el-date-picker v-model="dataForm.dateCheckIn" type="datetime" style="width: 100%;"
							value-format="yyyy-MM-dd hh:mm:ss" placeholder="请选择进户时间">
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="住宅楼栋" prop="numBuilding">
						<el-input v-model="dataForm.numBuilding" placeholder="请输入住宅楼栋" clearable
							:style="{ width: '100%' }"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="住宅层数描述" prop="desBuilding">
						<el-input v-model="dataForm.desBuilding" placeholder="请输入住宅层数描述" clearable
							:style="{ width: '100%' }"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="电梯总数" prop="numEv">
						<el-input v-model="dataForm.numEv" placeholder="请输入电梯总数" clearable
							:style="{ width: '100%' }"></el-input>
					</el-form-item>
				</el-col>
				<!-- <el-col :span="12">
					<el-form-item label="物业费收费标准" prop="desStandardsPfc">
						<el-input v-model="dataForm.desStandardsPfc" placeholder="请输入物业费收费标准" clearable
							:style="{ width: '100%' }"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="电梯收费标准" prop="desStandardsEfc">
						<el-input v-model="dataForm.desStandardsEfc" placeholder="请输入电梯收费标准" clearable
							:style="{ width: '100%' }"></el-input>
					</el-form-item>
				</el-col> -->
				<el-col :span="12">
					<el-form-item label="车位使用性质" prop="desParking">
						<el-input v-model="dataForm.desParking" placeholder="请输入车位使用性质" clearable
							:style="{ width: '100%' }"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="车库建筑面积" prop="decParking">
						<el-input v-model="dataForm.decParking" placeholder="请输入车库建筑面积" clearable
							:style="{ width: '100%' }"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="车位总数" prop="numPs">
						<el-input v-model="dataForm.numPs" placeholder="请输入车位总数" clearable
							:style="{ width: '100%' }"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="车位进户个数" prop="numPsSold">
						<el-input v-model="dataForm.numPsSold" placeholder="请输入车位进户个数" clearable
							:style="{ width: '100%' }"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="空置车位个数" prop="numPsSale">
						<el-input v-model="dataForm.numPsSale" placeholder="请输入空置车位个数" clearable
							:style="{ width: '100%' }"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="车位费" prop="decParkingFee">
						<el-input v-model="dataForm.decParkingFee" placeholder="请输入车位费" clearable
							:style="{ width: '100%' }"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="网点总建筑面" prop="decBranchArea">
						<el-input v-model="dataForm.decBranchArea" placeholder="请输入网点总建筑面" clearable
							:style="{ width: '100%' }"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="网点收费标准" prop="decBranch">
						<el-input v-model="dataForm.decBranch" placeholder="请输入网点收费标准" clearable
							:style="{ width: '100%' }"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="网点总户数" prop="numBranch">
						<el-input v-model="dataForm.numBranch" placeholder="请输入网点总户数" clearable
							:style="{ width: '100%' }"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="网点进户户数" prop="numBranchSold">
						<el-input v-model="dataForm.numBranchSold" placeholder="请输入网点进户户数" clearable
							:style="{ width: '100%' }"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="空置网点户数" prop="numBranchSale">
						<el-input v-model="dataForm.numBranchSale" placeholder="请输入空置网点户数" clearable
							:style="{ width: '100%' }"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="住宅楼栋" prop="numBuildings">
						<el-input v-model="dataForm.numBuildings" placeholder="请输入住宅楼栋" clearable
							:style="{ width: '100%' }"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="住宅总户数" prop="numResTotal">
						<el-input v-model="dataForm.numResTotal" placeholder="请输入住宅总户数" clearable
							:style="{ width: '100%' }"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="住宅进户数" prop="numRes">
						<el-input v-model="dataForm.numRes" placeholder="请输入住宅进户数" clearable
							:style="{ width: '100%' }"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="空置住宅户数" prop="numResVacant">
						<el-input v-model="dataForm.numResVacant" placeholder="请输入空置住宅户数" clearable
							:style="{ width: '100%' }"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="备注" prop="remark">
						<el-input v-model="dataForm.remark" placeholder="请输入备注" clearable :style="{ width: '100%' }"
							show-word-limit :maxlength="17"></el-input>
					</el-form-item>
				</el-col>
			</el-form>
			<span slot="footer" class="dialog-footer" v-if="!canEdit">
				<el-button @click="visible = false">取 消</el-button>
				<el-button type="primary" @click="submitProduct()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	// 上传文件
	import {
		selectHouseBlock,
		insertHouseBlock,
		editHouseBlock,
		deleteHouseBlock
	} from '@/api/wuye.js'
	import fileUpdata from '@/api/file.config'
	export default {
		name: "product",
		// 页面数据
		data() {
			return {
				queryParams: {
					pageNum: 1, // 显示第一页数据
					pageSize: 10, //每页显示十条
					code: undefined,
					name: undefined
				},
				dataForm: {
					code: '',
					describe: ''
				},
				rules: {
					code: [{
							required: true,
							message: '请输入',
							trigger: 'blur',
						},
						{
							pattern: /^\d+$/,
							message: '请输入正确的数字',
							trigger: 'blur',
						},
					],
					name: [{
						required: true,
						message: '请输入',
						trigger: 'blur',
					}, ],
					address: [{
						required: true,
						message: '请输入地址',
						trigger: 'blur',
					}],

					decCarea: [{
						required: true,
						message: '请输入占地面积',
						trigger: 'blur',
					}],
					decBarea: [{
						required: true,
						message: '请输入总建筑面积',
						trigger: 'blur',
					}],
					greeningRate: [{
						required: true,
						message: '请输入绿化率',
						trigger: 'blur',
					}],
					dateCheckIn: [{
						required: true,
						message: '请输入进户时间',
						trigger: 'blur',
					}],
					numBuilding: [{
						required: true,
						message: '请输入住宅楼栋',
						trigger: 'blur',
					}],
					desBuilding: [{
						required: true,
						message: '请输入住宅层数描述',
						trigger: 'blur',
					}],
					numEv: [{
						required: true,
						message: '请输入电梯总数',
						trigger: 'blur',
					}],
					desStandardsPfc: [{
						required: true,
						message: '请输入物业费收费标准',
						trigger: 'blur',
					}],
					desStandardsEfc: [{
						required: true,
						message: '请输入电梯收费标准',
						trigger: 'blur',
					}],
					desParking: [{
						required: true,
						message: '请输入车位使用性质',
						trigger: 'blur',
					}],
					decParking: [{
						required: true,
						message: '请输入车库建筑面积',
						trigger: 'blur',
					}],
					numPs: [{
						required: true,
						message: '请输入车位总数',
						trigger: 'blur',
					}],
					numPsSold: [{
						required: true,
						message: '请输入车位进户个数',
						trigger: 'blur',
					}],
					numPsSale: [{
						required: true,
						message: '请输入空置车位个数',
						trigger: 'blur',
					}],
					decParkingFee: [{
						required: true,
						message: '请输入车位费',
						trigger: 'blur',
					}],
					decBranchArea: [{
						required: true,
						message: '请输入网点总建筑面',
						trigger: 'blur',
					}],
					decBranch: [{
						required: true,
						message: '请输入网点收费标准',
						trigger: 'blur',
					}],
					numBranch: [{
						required: true,
						message: '请输入网点总户数',
						trigger: 'blur',
					}],
					numBranchSold: [{
						required: true,
						message: '请输入网点进户户数',
						trigger: 'blur',
					}],
					numBranchSale: [{
						required: true,
						message: '请输入空置网点户数',
						trigger: 'blur',
					}],
					numBuildings: [{
						required: true,
						message: '请输入住宅楼栋',
						trigger: 'blur',
					}],
					numResTotal: [{
						required: true,
						message: '请输入住宅总户数',
						trigger: 'blur',
					}],
					numRes: [{
						required: true,
						message: '请输入住宅进户数',
						trigger: 'blur',
					}],
					numResVacant: [{
						required: true,
						message: '请输入空置住宅户数',
						trigger: 'blur',
					}]
				},
				loading: false,
				list: [],
				total: 0, // 一共多少条数据
				visible: false,
				canEdit: false
			};
		},
		// 初始化
		mounted() {
			this.getList();
		},
		// 函数集合
		methods: {
			// 修改小区
			editProduct(row) {
				var type = "";
				this.canEdit = false;
				if (row.id) {
					// 修改
					type = "edit";
					this.dataForm = row;
				} else {
					// 新增
					type = "add";
					this.dataForm = {};
				}
				this.visible = true;
			},
			// 查看小区详情
			lookProduct(row) {
				this.dataForm = row;
				this.canEdit = true;
				this.visible = true;
			},
			// 删除小区
			delProduct(row) {
				this.$confirm("是否删除？", "提示", {
						confirmButtonText: "确 认",
						cancelButtonText: "取 消"
					})
					.then(() => {
						deleteHouseBlock({
							...row
						}).then(res => {
							if (res.code == 200) {
								this.$message({
									message: res.msg,
									type: 'success',
									duration: 1000,
									onClose: () => {
										this.visible = false;
										this.getList();
									},
								});
							}
						})
					})
					.catch(() => console.info("操作取消"));

			},
			//提交小区
			submitProduct() {
				this.$refs['elForm'].validate(valid => {
					if (valid) {
						if (this.dataForm.id) {
							editHouseBlock({
								...this.dataForm
							}).then(res => {
								if (res.code == 200) {
									this.$message({
										message: res.msg,
										type: 'success',
										duration: 1000,
										onClose: () => {
											this.visible = false;
											this.getList();
										},
									});
								}
							})
						} else {
							insertHouseBlock({
								...this.dataForm
							}).then(res => {
								if (res.code == 200) {
									this.$message({
										message: res.msg,
										type: 'success',
										duration: 1000,
										onClose: () => {
											this.visible = false;
											this.getList();
										},
									});
								}
							})
						}
					}
				})

			},
			//初始化列表
			getList() {
				this.loading = false;
				selectHouseBlock({
					...this.queryParams
				}).then(res => {
					this.list = res.rows;
					this.total = res.total
				})
			},
			reset() {
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
					code: undefined,
					name: undefined
				}
			},

		}
	}
</script>
<style scoped lang='scss'>
	.centered-content {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>